/* CSS for GO play - a local go web service to compile and run go code. */

/************* Customizable stuff *******************************/
/* What to you want for the tab width? */
textarea, pre { -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; }

html {
	height: 100%;
}
body {
	color: black;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}
a {
	color: #009;
}

/*********************************************************
  The about page, program display area, and settings
  should occupy the same place. They overlay each other.
**********************************************************/
#wrap,
#playsettings,
#about {
	padding: 5px;
	margin: 0;

	position: absolute;
	top: 50px;
	bottom: 25%;
	left: 0;
	right: 0;

	background: #FFD;
}

/*********************************************************
   There is an "about" page which is text that gives some
   idea of what we are about
**********************************************************/
#about {
	display: none;
	z-index: 1;
	padding: 10px 40px;
	font-size: 16px;
	font-family: Georgia, serif;
	overflow: auto;
}
#about p {
	max-width: 520px;
}
#about ul {
	max-width: 480px;
}

/*****************************************************************
  The "load" file-picker button
******************************************************************/
#load.style {
    width: 180px;
}

/*****************************************************************
  There is a Settings page which influences the overall behavior
******************************************************************/
#playsettings {
	margin: 0;
	float: left;

	position: absolute;
	top: 50px;
	bottom: 25%;
	left: 0;
	right: 0;

	background: #FFD;
}

#playsettings {
	display: none;
	z-index: 1;
	padding: 10px 40px;
	font-size: 16px;
	font-family: Georgia, serif;
	overflow: auto;
}
#playsettings p {
	max-width: 520px;
}
#playsettings ul {
	max-width: 480px;
}
#playsettings li {
	margin-bottom: 1em;
}

/* h1 seems to interfere with buster, so use h2. */
#playsettings h2 {
	font-size: 14pt;
}

/********************************************************
  source directory text input
**********************************************************/
#srcDir {
        width: 70%;
}

/********************************************************
  tab setting input text, need only to 2 characters or so
**********************************************************/
#tabSetting {
    width: 21px;
}

/********************************************************
  The "save" button
**********************************************************/
#saveLoc {
	width: 100px;
}

/********************************************************
  The sections: "settings" and "about"
**********************************************************/
#sectionTabs {
    padding-left: 10px;
    padding-top: 10px;
    float: right;
}

/***********************************************************************
  Buster uses a div called "settings". Don't confuse this with the
  goplay settings page called "playsettings"
  **********************************************************************/
#settings {
	float: left;
	padding: 10px;
}

/******************************************************************/

#code, pre, .lines {
	font-family: Menlo, Courier New, monospace;
	font-size: 11pt;
}

#code {
	/* background: inherit;  -- doesn't work on Opera */
	background: #FFD;

	width: 100%;
	height: 100%;
	padding: 0; margin: 0;
	border: none;
	outline: none;
	resize: none;
	wrap: off;
	float: right;
}
/* #errors { */
/* 	top: 75%; */
/* 	bottom: 0; */
/* 	left: 0; */
/* 	right: 0; */
/* 	padding: 8px; */
/* 	border: 1px solid #375EAB; */
/* 	background: #FFFFFF; */
/* } */
#output .loading {
	color: #999;
}
#output.error {
	color: #900;
}
#banner {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 50px;
}
#head {
	float: left;
	padding: 8px;

	font-size: 30px;
	font-family: Georgia, serif;
}

#controls {
    float: left;
    padding: 10px;
}

#controls a {
    text-decoration: none;
}

/* input[type=button] { */
/* 	height: 20px; */
/* 	border: 1px solid #ccc; */
/* 	font-size: 15px; */
/* 	background: #eee; */
/* 	color: black; */
/* } */

input[type=button]:hover {
	color: white;
	background: #666;
}
#shareURL {
	width: 350px;
	font-size: 16px;
	border: 1px solid #ccc;
	background: #eee;
	color: black;
}
.lines {
	float: left;
	overflow: hidden;
	text-align: right;
}
.lines div {
	padding-right: 5px;
	color: lightgray;
}
.lineerror {
	color: red;
	background: #FDD;
}
.exit {
	color: rgb(255, 209, 77)
	/* color: lightgray; */
}

div.output {
  /* position: absolute; */
  left: 50%;
  top: 50%;
  right: 40px;
  bottom: 40px;
  min-height: 35px;
  background: #202020;
  padding: 5px 10px;
  z-index: 2;

  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

}


div.output pre {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  overflow: auto;
}
div.output .stdout, div.output pre {
  color: #e6e6e6;
}
div.output .stderr, div.output .error {
  color: rgb(244, 74, 63);
}
div.output .system, div.output {
  color: rgb(255, 209, 77)
}
div.output {
  /*position: absolute;*/
  z-index: 1;
  float: none;
  top: auto;
  right: 5px;
  bottom: 5px;
  overflow: hidden;
}

div.buttons {
  position: absolute;
  float: none;
  top: auto;
  right: 20px;
}

div.errors {
  /* position: absolute; */
  /* left: 50%; */
  top: 75%;
  right: 40px;
  bottom: 0;
  background: #202020;
  padding: 5px 10px;
  z-index: 2;
  overflow: hidden;

  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;


}
div.errors pre {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  overflow: auto;
}
div.errors .stdout, div.errors pre {
  color: #e6e6e6;
}
div.errors .stderr, div.errors .error {
  color: rgb(244, 74, 63);
}
div.errors .system, div.errors .exit {
  color: rgb(255, 209, 77)
}

div.errors .buttons {
  position: absolute;
  float: none;
  top: auto;
  right: 20px;
  bottom: 5px;
}
